<template>
	<view class="after-sub">
		<view class="after-sub-header">
			<view class="header-1">
				<image src="../../static/index/back.png"></image>
			</view>
			<view class="header-2">这是考试名称</view>
			<view class="header-3" @click="gosuccess">
				<image src="../../static/index/more.png"></image>
			</view>
		</view>
		<view class="after-sub-content">
			<view class="after-sub-c">
				<view v-for="item in list" class="after-sub-c-item">
					<view>{{item.title}}</view>
					<view v-for="(it,i) in item.dataList" :key="i" class="datalist-item" :class="it.isOk?'actvie':''">
						<view>{{i === 0?'A': i === 1?'B': i === 2?'C':'D'}}
						</view>
						<view>{{it.name}}</view>
						<view v-if="it.isOk">
							<image src="../../static/index/cuo.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						title: '1、血吸虫防治中心在开展防治工作时，对于流行区域d的水源管理措施不包括（）',
						dataList: [
							{
								name: '兴修水利',
								isOk: false
							},
							{
								name: '粪便污染水源',
								isOk: false
							},
							{
								name: '改水改厕',
								isOk: true
							},
							{
								name: '对饮用水进行消毒',
								isOk: false
							}
						]
					},
					{
						title: '1、血吸虫防治中心在开展防治工作时，对于流行区域d的水源管理措施不包括（）',
						dataList: [
							{
								name: '兴修水利',
								isOk: false
							},
							{
								name: '粪便污染水源',
								isOk: false
							},
							{
								name: '改水改厕',
								isOk: true
							},
							{
								name: '对饮用水进行消毒',
								isOk: false
							}
						]
					},
					{
						title: '1、血吸虫防治中心在开展防治工作时，对于流行区域d的水源管理措施不包括（）',
						dataList: [
							{
								name: '兴修水利',
								isOk: false
							},
							{
								name: '粪便污染水源',
								isOk: false
							},
							{
								name: '改水改厕',
								isOk: true
							},
							{
								name: '对饮用水进行消毒',
								isOk: false
							}
						]
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.after-sub{
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	.after-sub-header{
		width: 100%;
		height: 44px;
		display: flex;
		line-height: 44px;
		.header-1{
			flex: 2;
			image{
				margin-top: 10px;
				margin-left: 16px;
				width: 28px;
				height: 28px;
			}
		}
		.header-2{
			flex: 8;
			text-align: center;
		}
		.header-3{
			flex: 2;
			text-align: center;
			image{
				margin-top: 10px;
				width: 28px;
				height: 28px;
			}
		}
	}
}
.after-sub-content{
	width: 100%;
	height: calc(100vh - 44px);
	overflow: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	padding: 16px;
	.after-sub-c{
		background-color: #F6F7FB;
		box-sizing: border-box;
		padding: 24px 16px;
		.after-sub-c-item{
			margin-top: 36px;
			font-size: 16px;
			&:nth-child(1){
				margin-top: 0;
			}
		}
	}
}
.datalist-item{
	display: flex;
	width: 100%;
	height: 44px;
	margin-top: 8px;
	background-color: #fff;
	line-height: 44px;
	border-radius: 8px;
	color: #646566;
	view:nth-child(1){
		flex: 1;
		margin-left: 16px;
	}
	view:nth-child(2){
		flex: 10;
	}
	view:nth-child(3){
		flex: 1;
		margin-right: 16px;
		image{
			width: 17px;
			height: 17px;
		}
	}
}
.actvie{
	border: 1px solid #D91515;
	color: #D91515;
}
</style>
